<template>
  <div class="xyslc">
    <slot name="header" />
    <p-table :pagination="false" bordered :columns="columnsA" :datp-source="tableDataA">
      <div class="span-ellipsis" slot="matters" slot-scope="row">
        <p-input :maxLength="50" v-if="isStart" size="small" v-model="formA.matters" placeholder="请输入"></p-input>
        <span v-else>{{ row.matters }}</span>
      </div>
    </p-table>
    <template v-if="showRouteB">
      <div class="xyslc-title">销售节点</div>
      <p-table :pagination="false" bordered :columns="columnsB" :datp-source="tableDataB">
        <div class="span-ellipsis" slot="month" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepB" size="small" v-model="formB.month" placeholder="请输入"></p-input>
          <span v-else>{{ row.month }}</span>
        </div>
        <div class="span-ellipsis" slot="amount" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepB" size="small" v-model="formB.amount" placeholder="请输入"></p-input>
          <span v-else>{{ row.amount }}</span>
        </div>
        <div class="span-ellipsis" slot="profit" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepB" size="small" v-model="formB.profit" placeholder="请输入"></p-input>
          <span v-else>{{ row.profit }}</span>
        </div>
        <div class="span-ellipsis" slot="ascription" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepB" size="small" v-model="formB.ascription" placeholder="请输入"></p-input>
          <span v-else>{{ row.ascription }}</span>
        </div>
        <div class="span-ellipsis" slot="responsible" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepB" size="small" v-model="formB.responsible" placeholder="请输入"></p-input>
          <span v-else>{{ row.responsible }}</span>
        </div>
      </p-table>
    </template>
    <template v-if="showRouteC">
      <div class="xyslc-title">经理节点</div>
      <p-table :pagination="false" bordered :columns="columnsC" :datp-source="tableDataC">
        <div class="span-ellipsis" slot="quarter" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.quarter" placeholder="请输入"></p-input>
          <span v-else>{{ row.quarter }}</span>
        </div>
        <div class="span-ellipsis" slot="policy" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.policy" placeholder="请输入"></p-input>
          <span v-else>{{ row.policy }}</span>
        </div>
        <div class="span-ellipsis" slot="region" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.region" placeholder="请输入"></p-input>
          <span v-else>{{ row.region }}</span>
        </div>
        <div class="span-ellipsis" slot="programme" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.programme" placeholder="请输入"></p-input>
          <span v-else>{{ row.programme }}</span>
        </div>
        <div class="span-ellipsis" slot="market" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.market" placeholder="请输入"></p-input>
          <span v-else>{{ row.market }}</span>
        </div>
        <div class="span-ellipsis" slot="quota" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepC" size="small" v-model="formC.quota" placeholder="请输入"></p-input>
          <span v-else>{{ row.quota }}</span>
        </div>
      </p-table>
    </template>
    <template v-if="showRouteD">
      <div class="xyslc-title">总经理节点</div>
      <p-table :pagination="false" bordered :columns="columnsD" :datp-source="tableDataD">
        <div class="span-ellipsis" slot="quarter" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.quarter" placeholder="请输入"></p-input>
          <span v-else>{{ row.quarter }}</span>
        </div>
        <div class="span-ellipsis" slot="businessPlan" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.businessPlan" placeholder="请输入"></p-input>
          <span v-else>{{ row.businessPlan }}</span>
        </div>
        <div class="span-ellipsis" slot="investmentPlan" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.investmentPlan" placeholder="请输入"></p-input>
          <span v-else>{{ row.investmentPlan }}</span>
        </div>
        <div class="span-ellipsis" slot="management" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.management" placeholder="请输入"></p-input>
          <span v-else>{{ row.management }}</span>
        </div>
        <div class="span-ellipsis" slot="culture" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.culture" placeholder="请输入"></p-input>
          <span v-else>{{ row.culture }}</span>
        </div>
        <div class="span-ellipsis" slot="managementIdea" slot-scope="row">
          <p-input :maxLength="50" v-if="isStepD" size="small" v-model="formD.managementIdea" placeholder="请输入"></p-input>
          <span v-else>{{ row.managementIdea }}</span>
        </div>
      </p-table>
    </template>
    <slot name="chart" />
    <slot name="submit" />
  </div>
</template>

<script>
import { timestampToDatetime } from '@/utils/util'

const columnsA = [
  {
    title: '发起部门',
    key: 'departmentName',
    dataIndex: 'departmentName',
    ellipsis: true,
  },
  {
    title: '发起人',
    key: 'name',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    title: '发起日期',
    key: 'createTime',
    dataIndex: 'createTime',
    ellipsis: true,
  },
  {
    title: '发起事宜',
    key: 'matters',
    ellipsis: true,
    scopedSlots: { customRender: 'matters' },
  },
]

const columnsB = [
  {
    title: '月份',
    key: 'month',
    ellipsis: true,
    scopedSlots: { customRender: 'month' }
  },
  {
    title: '销售金额',
    key: 'amount',
    ellipsis: true,
    scopedSlots: { customRender: 'amount' }
  },
  {
    title: '销售利润',
    key: 'profit',
    ellipsis: true,
    scopedSlots: { customRender: 'profit' }
  },
  {
    title: '收入归属事业部',
    key: 'ascription',
    ellipsis: true,
    scopedSlots: { customRender: 'ascription' }
  },
  {
    title: '负责人',
    key: 'responsible',
    ellipsis: true,
    scopedSlots: { customRender: 'responsible' }
  }
]

const columnsC = [
  {
    title: '季度',
    key: 'quarter',
    ellipsis: true,
    scopedSlots: { customRender: 'quarter' }
  },
  {
    title: '销售政策',
    key: 'policy',
    ellipsis: true,
    scopedSlots: { customRender: 'policy' }
  },
  {
    title: '销售区域',
    key: 'region',
    ellipsis: true,
    scopedSlots: { customRender: 'region' }
  },
  {
    title: '销售方案',
    key: 'programme',
    ellipsis: true,
    scopedSlots: { customRender: 'programme' }
  },
  {
    title: '销售市场',
    key: 'market',
    ellipsis: true,
    scopedSlots: { customRender: 'market' }
  },
  {
    title: '销售指标',
    key: 'quota',
    ellipsis: true,
    scopedSlots: { customRender: 'quota' }
  }
]

const columnsD = [
  {
    title: '季度',
    key: 'quarter',
    ellipsis: true,
    scopedSlots: { customRender: 'quarter' }
  },
  {
    title: '经营计划',
    key: 'businessPlan',
    ellipsis: true,
    scopedSlots: { customRender: 'businessPlan' }
  },
  {
    title: '投资方案',
    key: 'investmentPlan',
    ellipsis: true,
    scopedSlots: { customRender: 'investmentPlan' }
  },
  {
    title: '经营管理',
    key: 'management',
    ellipsis: true,
    scopedSlots: { customRender: 'management' }
  },
  {
    title: '企业文化',
    key: 'culture',
    ellipsis: true,
    scopedSlots: { customRender: 'culture' }
  },
  {
    title: '经营理念',
    key: 'managementIdea',
    ellipsis: true,
    scopedSlots: { customRender: 'managementIdea' }
  }
]

export default {
  name: 'XYSLC',
  inject: ['action', 'route', 'processInstanceId', 'isStart', 'START_FORM_KEY'],
  props: {
    formDatas: { type: Array, default: () => ([]) },
    processTplInfo: { type: Object, default: null },
    curUserInfo: { type: Object, default: null }
  },
  data () {
    return {
      columnsA,
      formA: {},
      tableDataA: [{ key: 1 }],
      columnsB,
      formB: {},
      tableDataB: [{ key: 1 }],
      columnsC,
      formC: {},
      tableDataC: [{ key: 1 }],
      columnsD,
      formD: {},
      tableDataD: [{ key: 1 }]
    }
  },
  computed: {
    showRouteB () {
      return this.route.startsWith('b') || this.showRouteC
    },
    showRouteC () {
      return this.route === 'c' || this.showRouteD
    },
    showRouteD () {
      return (this.route === 'd' || this.action === 'complate') && this.action !== 'show'
    },
    isStepB () {
      return this.action === 'todo' && this.route.startsWith('b')
    },
    isStepC () {
      return this.action === 'todo' && this.route === 'c'
    },
    isStepD () {
      return this.action === 'todo' && this.route === 'd'
    }
  },
  mounted () {
    switch (this.action) {
      case 'create':
        this.beforeCreateSubmit()
        break
      default:
        this.afterCreate()
    }
  },
  methods: {
    beforeCreateSubmit () {
      this.formA = {
        departmentName: this.curUserInfo.departmentName,
        name: this.curUserInfo.name,
        createTime: timestampToDatetime(Date.now(), 2),
        matters: ''
      }
      this.$set(this.tableDataA, 0, Object.assign(this.tableDataA[0], this.formA))
    },
    afterCreate () {
      const tableDatas = { a: [], b: [], c: [], d: [] }
      this.formDatas.forEach(data => {
        let key = ''
        if (data.formKey === this.START_FORM_KEY) key = 'a'
        else key = data.formKey.substr(0, 1)
        if (tableDatas[key]) {
          const td = { key: tableDatas[key].length, ...data.variables }
          tableDatas[key].push(td)
        }
      })
      this.tableDataA = tableDatas.a
      this.formA = tableDatas.a[0]
      if (this.showRouteB && !this.isStepB) this.tableDataB = tableDatas.b
      if (this.showRouteC && !this.isStepC) this.tableDataC = tableDatas.c
      if (this.showRouteD && !this.isStepD) this.tableDataD = tableDatas.d
    },
    getVariables () {
      return new Promise(resolve => {
        if (this.action === 'create' || this.isStart) return resolve([true, this.formA])
        else if (this.isStepB) return resolve([true, this.formB])
        else if (this.isStepC) return resolve([true, this.formC])
        else if (this.isStepD) return resolve([true, this.formD])
      })
    }
  }
}
</script>

<style lang="less" scoped>
.xyslc-title {
  margin-top: 20px;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
